<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../vue.js"></script>
</head>

<body>
  <div id="app">
    
  </div>
  <script>
    Vue.config.productionTip = false;
    //想让两个不同的组件用同一个方法 不能直接把方法添加在VueComponent上 
    //因为不同的组件是不同的VueComponent构造函数实例化出来的
    Vue.prototype.$test = "666"

    //组件1
    const Count1 = Vue.extend({
      name:"Count1",
      data(){
        return{}
      },
      template:`
        <button @click = "test">组件1测试</button>
      `,
      methods:{
        test(){
          console.log(this.$test); //找到Vue原型上可以打印
          console.log(this.one); //找到Count1的VueComponent原型上可以打印
        }
      }
    })

    Count1.prototype.one = "111"

    //组件2
    const Count2 = Vue.extend({
      name: "Count2",
      data(){
        return{}
      },
      template:`
        <button @click = "test">组件2测试</button>
      `,
      methods:{
        test(){
          console.log(this.$test); //找到Vue原型上可以打印
          console.log(this.one); //找不到
        }
      }
    })

    //组件实例的原型链: 
      //Count1组件实例-->Count1的VueComponent原型对象-->Vue的原型对象-->Object的原型对象-->null
      //Count2组件实例-->Count2的VueComponent原型对象-->Vue的原型对象

    console.log(new Count1() ,"Count1组件实例");
    console.log(new Count1().__proto__,"向上一级找到当前VueComponent构造函数的原型对象");
    console.log(new Count1().__proto__.__proto__ ,"在向上一级找到Vue的原型对象");
    console.log(new Count1().__proto__.__proto__.__proto__ ,"在向上一级找到Object的原型对象");
    console.log(new Count1().__proto__.__proto__.__proto__.__proto__ ,"在向上一级找到null");

    
    const vm = new Vue({
      el: "#app",
      data() {
        return {}
      },
      components:{
        Count1:Count1,
        Count2:Count2
      },
      template:`
        <div>
          <Count1/>
          <hr/>
          <Count2/>
        </div>
      `
    })
  </script>
</body>

</html>